<title>修改房源属性</title>
@extends('admin.common.main')
<!-- webupload上传样式 -->
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@section('html')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 房源属性管理
        <span class="c-gray en">&gt;</span> 修改房源属性
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        <form action="{{ route('admin.fangattr.update',$fangattr) }}" id="form-member-add" method="post" class="form form-horizontal">
            @method('PUT')
            @csrf
            
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否顶级：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <span class="select-box">
                        <select name="pid" class="select" name="pid">
                            <option value="0" @if($fangattr->pid == 0) selected @endif >==顶级==</option>
                            @foreach($data as $item)
                                <option value="{{ $item->id }}" @if($fangattr->pid == $item->id) selected @endif >{{ $item->name }}</option>
                            @endforeach
                        </select>
				    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{ $fangattr->name }}" placeholder="" name="name" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性图标：</label>
                <div class="formControls col-xs-4 col-sm-5">
                    <!-- 图片上传 -->
                    <div id="picker">修改图标</div>
                </div>
                <div class="formControls col-xs-4 col-sm-3">
                    <input type="hidden" value="{{ $fangattr->icon }}" value="{{ $fangattr->icon }}" id="icon" name="icon" />
                    <img src="{{ $fangattr->icon }}" id="pic" style="width:150px;" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">字段名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{ $fangattr->field_name }}" placeholder="" name="field_name" />
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="修改属性" /> 
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <!-- webupload上传js -->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <script type="text/javascript">

        // 前端表单验证
        // https://www.runoob.com/jquery/jquery-plugin-validate.html
        $("#form-member-add").validate({
            // 规则
            rules: {
                // 表单元素名称
                name: {
                    // 验证规则
                    required: true
                },
            },
            // 消息提示
            messages: {
                name:{
                    required:'属性名称不能为空'
                },
            },
            // 取消键盘事件
            onkeyup: false,
            // 验证成功后的样式
            success: "valid",
            // 验证通过后，处理的方法 form dom对象
            submitHandler: function (form) {
                // 表单提交
            form.submit();
            }
        });







        // 初始化 Web Uploadervar 
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端 上传PHP的代码
            server: '{{ route('admin.fangattr.upfile') }}',
            // 文件上传时携带参数
            formData:{
                _token:'{{csrf_token()}}'
            },
            // 文件上传的表单名称
            fileVal:'file',
            // 选择文件的按钮
            pick: {
               id:'#picker',
               // 是否开启选择多个文件的能力
               multiple:false,
            },
            // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true
        });
        // 上传成功时的回调方法
        uploader.on( 'uploadSuccess', function( file,ret ) {
            // 图片路径
            let src = ret.url;
            // 给表单添加value值
            $('#icon').val(src);
            // 给图片添加src
            $('#pic').attr('src',src);
        });
    </script>
@endsection


